<template>
  <div class="container">
    <div class="container-1200">
      <div class="title mg-B20">编辑项目活动资料</div>
      <div>
        <el-form
        :model="projectActivityForm"
        :rules="projectActivityRules"
        ref="projectActivityForm"
      >
        <el-row class="rowBorder rowTopBorder">
          <el-col :span="4" class="col-flex bg-ccc request">活动名称</el-col> 
         <el-col :span="8" class="col-flex colLeftBorder colRightBorder">
           <el-form-item prop="activityName" class="vali">
                <el-input v-model="projectActivityForm.activityName" >
                </el-input>
              </el-form-item>
           </el-col>
          <el-col :span="4" class="col-flex bg-ccc request">级别(国际/国/省/市)</el-col> 
         <el-col :span="8" class="col-flex colLeftBorder ">
            <el-form-item prop="jb" class="vali">
           <el-select
                  v-model="projectActivityForm.jb"
                  placeholder="点击选择企业等级注册类型"
                >
                  <el-option
                    v-for="item in jbDict"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                </el-form-item>
           </el-col>
        </el-row>
        <el-row class="rowBorder">
          <el-col :span="4" class="col-flex bg-ccc request">活动主题</el-col>
         <el-col :span="8" class="col-flex colLeftBorder colRightBorder">
           <el-form-item prop="activityTitle" class="vali">
                <el-input v-model="projectActivityForm.activityTitle" >
                </el-input>
              </el-form-item>
         </el-col>
          <el-col :span="4" class="col-flex bg-ccc request">活动时间</el-col>
         <el-col :span="8" class="col-flex colLeftBorder ">
           <el-form-item prop="activityDate" class="vali">
           <el-date-picker
                  v-model="projectActivityForm.activityDate"
                  type="date"
                  placeholder="请选择启动时间"
                >
                </el-date-picker>
                </el-form-item>
         </el-col>
        </el-row>
        <el-row class="rowBorder">
          <el-col :span="4" class="col-flex bg-ccc request">举办单位</el-col>
         <el-col :span="8" class="col-flex colLeftBorder colRightBorder">
           <el-form-item prop="company" class="vali">
                <el-input v-model="projectActivityForm.company" >
                </el-input>
              </el-form-item>
         </el-col>
          <el-col :span="4" class="col-flex bg-ccc request">项目名称</el-col>
         <el-col :span="8" class="col-flex colLeftBorder leftAlign-pd15">
           <el-form-item prop="projectId" class="vali">
           <el-select v-model="projectActivityForm.projectId" placeholder="请选择项目" filterable clearable>
            <el-option
              :label="item.projectName"
              :value="item.id"
              v-for="item in projectList"
              :key="item.id"
            ></el-option>
          </el-select>
          </el-form-item>
           </el-col>
        </el-row>
        <el-row class="rowBorder">
          <el-col :span="4" class="col-flex bg-ccc ">活动地点</el-col>
         <el-col :span="20" class="col-flex colLeftBorder">
           <el-form-item prop="address" class="vali">
                <el-input v-model="projectActivityForm.address" >
                </el-input>
              </el-form-item>
         </el-col>
        </el-row>
        <!--<el-row class="rowBorder">-->
          <!--<el-col :span="4" class="col-flex bg-ccc">活动状态</el-col>-->
         <!--<el-col :span="8" class="col-flex colLeftBorder colRightBorder leftAlign-pd15">{{ projectActivityStatusFormate(projectActivityForm.status) }}</el-col>-->
          <!--<el-col :span="4" class="col-flex bg-ccc">驳回说明</el-col>-->
         <!--<el-col :span="8" class="col-flex colLeftBorder leftAlign-pd15">{{ projectActivityForm.memo }}</el-col>-->
        <!--</el-row>-->
        <el-row class="rowBorder bg-ccc">
          <el-col :span="4" class="col-flex request">相关资料</el-col>
          <el-col :span="20" class="col-flex colLeftBorder bg-fff leftAlign-pd30">
            <!-- {{ projectActivityForm.meta }} -->
            <!-- <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in meta"
                :key="index"
                color= '#0bbd87'
                >
                <div class="flexWithJusCenter">
                    <el-link
                      :href="activity.url"
                      target="_blank"
                      type="primary"
                      >{{ activity.name }}</el-link
                    >
                    <el-button
                      class="mg-L20"
                      type="danger"
                      icon="el-icon-delete"
                      circle
                      size="mini"
                      @click="removeItem(index)"
                    ></el-button>
                  </div>
              </el-timeline-item>
            </el-timeline>
            <div class="mg-L20">
              <el-form-item prop="meta">
                <singleFileUpload @returnUrl="returnUrl"></singleFileUpload>
              </el-form-item>
              </div> -->

              <div style="margin:10px">
                <!-- <el-image fit="contain"
                  style="width: 100px; height: 100px"
                  :src="meta.first"
                >
                </el-image> -->
                <img style="width: 100px; height: 100px" :src="meta.first" />
                <div class="flexWithJusCenter">
                   <el-link :href="meta.first" target="_blank" type="primary" class="link">活动主题图</el-link> 
                   </div>
                   <div class="flexWithJusCenter mg-T10">
                   <singleFileUpload @returnUrl="returnFirstUrl"></singleFileUpload>
                </div>
              </div>

              <div style="margin:10px">
                <!-- <el-image fit="contain"
                  style="width: 100px; height: 100px"
                  :src="meta.second"
                >
                </el-image> -->
                <img style="width: 100px; height: 100px" :src="meta.second"/>
                <div class="flexWithJusCenter">
                   <el-link :href="meta.second" target="_blank" type="primary" class="link">领导讲话图</el-link> 
                   </div>
                   <div class="flexWithJusCenter mg-T10">
                   <singleFileUpload @returnUrl="returnSecondUrl"></singleFileUpload>
                </div>
              </div>

              <div style="margin:10px">
                <!-- <el-image fit="contain"
                  style="width: 100px; height: 100px"
                  :src="meta.third"
                >
                </el-image> -->
                <img style="width: 100px; height: 100px" :src="meta.third"/>
                <div class="flexWithJusCenter">
                   <el-link :href="meta.third" target="_blank" type="primary" class="link">参会人员图</el-link> 
                   </div>
                   <div class="flexWithJusCenter mg-T10">
                   <singleFileUpload @returnUrl="returnThirdUrl"></singleFileUpload>
                </div>
              </div>
              <el-button type="primary" @click="openExamples"
                >查看示例图</el-button
              >
            </el-col>
          </el-row>
          <div class="mg-T20">
            <el-form-item>
          <el-button type="primary" @click="onSave('projectActivityForm')"
            >保存为草稿</el-button
          >
          <el-button type="primary" @click="onSaveAndSubmit('projectActivityForm')"
            >保存并提交</el-button
          >
          <el-button @click="back">返回</el-button>
        </el-form-item>
          </div>
          
          </el-form>
      </div>
    </div>

    <el-dialog title="示例图" :visible.sync="examplesVisible" width="700px">
      <div class="flex">
      <div style="margin: 10px">
        <el-image fit="contain" style="width: 200px; height: 200px" src="http://www.lwscjd.cn/data/upload/10200/2021/10/23/8ecfd3c39384f5b20439cca355b65829/角度1-活动全景包含主视觉.jpg">
        </el-image>
        <div class="flexWithJusCenter">
          活动主题图
        </div>
      </div>

      <div style="margin: 10px">
        <el-image fit="contain" style="width: 200px; height: 200px" src="http://www.lwscjd.cn/data/upload/10200/2021/10/23/aa550a8a52d34dd3e469529948681bb5/角度2-领导发言颁奖等主要环节.jpg">
        </el-image>
        <div class="flexWithJusCenter">
          领导讲话图
        </div>
      </div>

      <div style="margin: 10px">
        <el-image fit="contain" style="width: 200px; height: 200px" src="http://www.lwscjd.cn/data/upload/10200/2021/10/23/8dce6e13078de0bc3657156002197a3d/角度3-观众全景.jpg">
        </el-image>
        <div class="flexWithJusCenter">
          参会人员图
        </div>
      </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import multiUpload from "@/components/Upload/multiUpload";
import fileUpload from "@/components/Upload/fileUpload";
import singleFileUpload from "@/components/Upload/singleFileUpload";
import { find as companyFind } from "@/api/company";
import { list as dictList } from "@/api/dict";
import utils from "@/utils/utils.js";
import { validPhone, validPositiveIntAndZero } from "@/utils/validate.js";
import { find as projectFind, list as projectList } from "@/api/project";
import { update as projectActivityUpdate, find as projectActivityFind } from "@/api/projectActivity";
import { save as projectActivitySave } from "@/api/projectActivity";

export default {
  components: { multiUpload, fileUpload, singleFileUpload },
  name: "projectActivityAdd",
  data() {
    const validateCapital = (rule, value, callback) => {
      if (utils.isNull(value)) {
        callback();
      } else if (!validPositiveIntAndZero(value)) {
        callback(new Error("必须为大于等于0的数值"));
      } else {
        callback();
      }
    };

    return {
      examplesVisible: false,
      meta:{
        first:"",
        second:"",
        third:"",
        },
      projectActivityForm: {
        projectId: "", //所属项目',
        projectName: "", //项目名称',
        jb: "", //级别(国际/国/省/市)',
        activityName: "", //活动名称',
        activityTitle: "", //活动主题',
        activityDate: "", //活动时间',
        address: "", //活动地点',
        company: "", //举办单位',
        meta: "", //相关资料（横幅、台上、台下）[{name:,url:}]',
        companyId: "", //
      },
      projectActivityRules: {
        projectId: [
          { required: true, message: "请选择项目名称", trigger: "blur" },
        ],
        jb: [
          { required: true, message: "请选择级别", trigger: "blur" },
        ],
        activityName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        activityDate: [
          { required: true, message: "请选择活动时间", trigger: "blur" },
        ],
        activityTitle: [
          { required: true, message: "请输入活动主题", trigger: "blur" },
        ],
        company: [
          { required: true, message: "请输入举办单位", trigger: "blur" },
        ],
      },

      projectId: "",
      projectInfo: {},
      projectList:[],
      companyId: "",
      projectActivityForm: {},

      jbDict: [],
      jbPromise:"",
      projectActivityStatusDict:[],
      projectActivityStatusPromise:"",

      path: "",
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.path = route.path
      },
      immediate: true,
    },
  },

  activated(){
    console.log('activated执行了--',);
    if(this.$store.getters.closeAliveName == "projectActivityAdd"){
      console.log('activated执行了--',this.$store.getters);
      this.meta = {first:"",
        second:"",
        third:"",},
      this.projectActivityForm = {
        projectId: "", //所属项目',
        projectName: "", //项目名称',
        jb: "", //级别(国际/国/省/市)',
        activityName: "", //活动名称',
        activityTitle: "", //活动主题',
        activityDate: "", //活动时间',
        address: "", //活动地点',
        company: "", //举办单位',
        meta: "", //相关资料（横幅、台上、台下）[{name:,url:}]',
        companyId: "", //
      },
      this.$store.dispatch("user/cleanCloseAliveName")
    }
  },

  created() {
    this.jbPromise = utils.getDictList("jb", (res) => {
      this.jbDict = res.data;
    });
    this.projectActivityStatusPromise = utils.getDictList("projectActivity_status", (res) => {
      this.projectActivityStatusDict = res.data;
    });
    // if (this.$route.query) {
    //   this.projectActivityForm.companyId = this.companyId =
    //     this.$route.query.companyId;
    //   this.projectActivityForm.projectId = this.projectId =
    //     this.$route.query.projectId;
    //     this.projectActivityId  =
    //     this.$route.query.projectActivityId;
    //     this.projectFind(this.projectId)
      
    // }
  },

  mounted() {
    this.getProjectList()
    Promise.all([this.jbPromise, this.projectActivityStatusPromise]).then(
      (res) => {
        //console.log("字典已经全部加载完成--");
        // this.projectActivityFind(this.projectActivityId);
      }
    );
  },

  destroyed() {},

  methods: {
    //打开示例图
    openExamples() {
      this.examplesVisible = true;
    },
    removeItem(index) {
      this.meta.splice(index, 1);
    },

    returnFirstUrl(data) {
      console.log("data--", data);
      this.meta.first = data.url;
      console.log("this.meta--", this.meta);
    },

    returnSecondUrl(data) {
      console.log("data--", data);
      this.meta.second = data.url;
    },

    returnThirdUrl(data) {
      console.log("data--", data);
      this.meta.third = data.url;
    },
    
    //获取活动信息
    projectActivityFind(id) {
      projectActivityFind(id).then((res) => {
        console.log("获取活动信息--", res);
        if (res.type == "success") {
          if(!utils.isNull(res.data.projectActivity.meta)){
            this.meta = JSON.parse(res.data.projectActivity.meta)
          }
          this.projectActivityForm = res.data.projectActivity;
          this.projectActivityForm.createDate = utils.dateFormatter(this.projectActivityForm.createDate)
        }
      });
    },

    //获取项目列表
    getProjectList(){
      projectList().then((res) => {
        console.log("获取项目信息--", res);
        if (res.type == "success") {
          this.projectList = res.data.data;
        }
      });
    },

    //获取公司信息
    companyFind(id) {
      companyFind(id).then((res) => {
        console.log("获取公司信息res--", res);
        if (res.type == "success") {
          this.projectActivityForm = res.data.company;
        }
      });
    },

    //获取项目信息
    projectFind(id) {
      let _this = this
      projectFind(id).then((res) => {
        console.log("获取项目信息--", res);
        if (res.type == "success") {
          _this.projectInfo = res.data.project;
          _this.projectActivityForm.projectName = res.data.project.projectName;
        }
      });
    },

    onSaveAndSubmit(formName){
      this.projectActivityForm.status = 1
      this.onSubmit(formName,()=>{
        this.$message.success("项目活动资料成功提交");
      })
    },

    onSave(formName){
      this.projectActivityForm.status = 0
      this.onSubmit(formName,()=>{
        this.$message.success("项目活动资料保存成功");
      })
    },

    //表单提交事件
    onSubmit(formName, callback) {
      let _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(!utils.isNull(_this.meta.first) && !utils.isNull(_this.meta.second) && !utils.isNull(_this.meta.third)){
            _this.projectActivityForm.meta = JSON.stringify(_this.meta)
            projectActivitySave(this.projectActivityForm)
            .then((res) => {
              console.log("projectActivitySave--", res);
              if (res.type == "success") {
                if(callback){
                  callback(res)
                }
                this.$store.dispatch("user/setCloseView", this.path)
                this.$router.push({
                  path: "/projectActivity/list",
                  query: {
                    companyId: this.companyId,
                    projectId: this.projectId,
                  },
                });
              }
            })
            .catch((err) => {
              this.$message.error(err.msg);
            });
          }else{
            if(utils.isNull(_this.meta.first)){
              this.$notify.error({
              title: '提示',
              message: '请上传活动主题图',
            });  
            }else
            if(utils.isNull(_this.meta.second)){
              this.$notify.error({
              title: '提示',
              message: '请上传领导讲话图',
            }); 
            }else
            if(utils.isNull(_this.meta.third)){
              this.$notify.error({
              title: '提示',
              message: '请上传参会人员图',
            }); 
            }
          }
          
        }
      });
    },

    back(){
      this.$router.go(-1)
    },

    jbFormate(data) {
      return utils.selectDictLabel(this.jbDict, data);
    },

    projectActivityStatusFormate(data) {
      return utils.selectDictLabel(this.projectActivityStatusDict, "projectActivity_status-" + data);
    },

  },
};
</script>

<style lang="scss" scoped>
/deep/ .vali .el-form-item__content .el-form-item__error {
  top: 5px !important;
  right: 30px !important;
  left: unset !important;
  // left: 80% !important;
}

/deep/ .el-date-editor {
  width: 100%;
}

/deep/ .el-date-editor .el-input__inner {
  padding-right: 0px !important;
}

/deep/ .el-input__inner {
  border: 1px solid #fff !important;
}

.el-select {
  width: 100%;
}
.el-form-item {
  margin: 0;
  width: 100%;
}
</style>
